<!--suppress HtmlDeprecatedAttribute -->
<template>
  <el-dialog title="商品搜索" :visible.sync="dialogVisible" @open="beforeOpen" @closed="afterClose"
             :append-to-body="true" width="60%">
    <el-form ref="form" size="small" :model="form" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="商品编号" prop="goodId">
            <el-input v-model="form.goodId" placeholder="商品编号"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品名称" prop="goodName">
            <el-input v-model="form.goodName" placeholder="商品名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品类别" prop="goodCategoryId">
            <el-cascader v-model="form.goodCategoryId" :options="categoryList" :show-all-levels="false"
                         :props="categoryCascaderProps" :disabled="categoryLoading ? true : null"
                         :placeholder="categoryLoading ? '加载中...' : '请选择'" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺编号" prop="storeId">
            <el-input v-model="form.storeId" placeholder="店铺编号"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺名称" prop="storeName">
            <el-input v-model="form.storeName" placeholder="店铺名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <el-button size="small" @click="handleReset">重置</el-button>
          <el-button size="small" type="primary" @click="handleQuery" :loading="queryLoading"
                     icon="el-icon-search">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" :data="tableData" style="width: 100%" height="200" max-height="600" :border="true"
              v-loading='false' highlight-current-row @current-change="handleCurrentChange">
      <el-table-column prop="id" align="center" label="商品编号" width="80"/>
      <el-table-column prop="name" align="center" label="商品名称" resizable width="210"/>
      <el-table-column prop="goodCategoryName" align="center" label="商品类别" resizable width="150"/>
      <el-table-column prop="storeId" align="center" label="店铺编号" width="80"/>
      <el-table-column prop="storeName" align="center" label="店铺名称" resizable width="210"/>
      <el-table-column prop="createTime" align="center" label="创建时间" resizable width="180"/>
      <el-table-column prop="state" align="center" label="状态" resizable width="100"/>
      <el-table-column prop="remark" align="center" label="备注" resizable  width="100"/>
    </el-table>
    <span slot="footer">
      <el-button size="small" @click="handleClose">取消</el-button>
      <el-button size="small" @click="handleOK" type="primary" :disabled="queryLoading">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import PageDTO from '@/api/entity/PageDTO'
import { ResultCode } from '@/constants/constants'
import { formatTime } from '@/utils/ConvertUtils'
import { queryGoodCategoryTree } from '@/api/ApiSysGoodCategory'
import { queryGoodDetailByPageAdmin } from '@/api/ApiGoodDetail'
import GoodDetailQueryDTO from '@/api/entity/GoodDetailQueryDTO'

export default {
  name: 'GoodsSearch',
  props: {
    visible: {
      require: true,
      type: Boolean
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      categoryCascaderProps: {
        expandTrigger: 'click',
        value: 'id',
        label: 'name',
        children: 'children',
        emitPath: false
      },
      queryLoading: false,
      dialogVisible: false,
      categoryList: [],
      categoryLoading: false,
      form: {
        goodId: null,
        goodName: null,
        goodCategoryId: null,
        storeId: null,
        storeName: null
      },
      tableData: [],
      selectRow: null
    }
  },
  methods: {
    beforeOpen () {
      this.handleReset()
    },
    afterClose () {

    },
    convertItem (item) {
      item.createTime = formatTime(item.createTime)
      return item
    },
    handleQuery () {
      const vm = this
      vm.queryLoading = true
      const pageDTO = PageDTO.instance()
      pageDTO.setSize(40)
      pageDTO.setCurrent(1)
      const wrapper = GoodDetailQueryDTO.instance()
      wrapper.addGoodId(this.form.goodId)
      wrapper.addGoodName(this.form.goodName)
      wrapper.addGoodCategoryId(this.form.goodCategoryId)
      wrapper.addStoreId(this.form.storeId)
      wrapper.addStoreName(this.form.storeName)
      pageDTO.setCondition(wrapper)
      queryGoodDetailByPageAdmin(pageDTO, data => {
        if (data && data.code === ResultCode.OK) {
          const object = data.object
          if (object && object['records'] && typeof object['records'] === 'object') {
            const list = []
            object['records'].forEach(item => {
              list.push(vm.convertItem(item))
            })
            vm.tableData = list
            if (object['pages'] > 1) {
              this.$message.info('数据过多，这里只显示' +
                object['size'] +
                '数据，若不存在你需要的数据请使用更精确的查询条件！')
            }
          }
        }
      }, () => {
        vm.queryLoading = false
      })
    },
    handleReset () {
      this.form = {}
      this.tableData = []
      this.selectRow = null
    },
    handleCurrentChange (newRow) {
      this.selectRow = newRow
    },
    handleClose () {
      this.dialogVisible = false
    },
    handleOK () {
      if (this.selectRow && this.selectRow.id) {
        this.$emit('change', this.selectRow)
        this.dialogVisible = false
      } else {
        this.$message.warning('请先选择一个商品数据')
      }
    },
    dealWithCategory (node) {
      if (node) {
        Object.assign(node, node.node)
        if (node.children) {
          node.children.forEach(this.dealWithCategory)
        }
      }
    }
  },
  watch: {
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    },
    dialogVisible (val) {
      this.$emit('visible', val)
    }
  },
  mounted () {
    // 查询类别树
    this.categoryLoading = true
    queryGoodCategoryTree(data => {
      const rootList = data.object.children
      rootList.forEach(this.dealWithCategory)
      this.categoryList = rootList
    }, () => {
      this.categoryLoading = false
    })
  }
}
</script>

<style scoped>

</style>
